<template>
	<view class="container">
		<view class="header-box">
			<view class="search-box">
				<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
			</view>
			
			<view class="tabs-box">
				<u-tabs :list="list1" @click="click"></u-tabs>
			</view>
		</view>	
		<view class="main">
			<scroll-view scroll-y scroll-with-animation class="scroll-view">
				<view class="list">
					<view class="list-item" v-for="item in 6" @click="clickItem">
						<view class="list-item-left">
							<image></image>
						</view>
						<view class="list-item-right">
							<view class="list-title">推客联盟推客联盟推客联盟推客联盟
							推客联盟推客联盟推客联盟推客联盟推客联盟</view>
							<view class="list-content">
								<view class="list-content-item">
									<text>券后价</text>
									<view>100.00</view>
								</view>
								<view class="list-content-item">
									<text>佣金</text>
									<view>100.00</view>
								</view>
								<view class="list-content-item">
									<text>佣金比</text>
									<view>100.00</view>
								</view>
							</view>
							
							<view class="list-bottom">
								<view class="list-btn">获取</view>
							</view>
						</view>
					</view>
					</view>
			</scroll-view>
			
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return {
				keyword: "",
				list1: [{
						name: '全部',
					}, {
						name: '数码',
					}, {
						name: '电脑'
					}, {
						name: '家用电器'
					}, {
						name: '美妆护肤'
					}, {
						name: '运动户外'
					}, {
						name: '母婴'
					}, {
						name: '财经'
					}, {
						name: '手工'
				}]
			}
		},
		methods: {
            click(item) {
                console.log('item', item);
            },
			clickItem(){
				uni.navigateTo({
					url: "/pages/onlineRetailers/details/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		display: flex;
		flex-direction: column;
		height: 100vh;
		font-size: 26rpx;
		background-color: #f1f1f1;
		box-sizing: border-box;
		.scroll-view{
			height: 100%;
		}
		.search-box{
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
		}
		.tabs-box{
			background-color: #fff;
			// border-top: 1px solid #ccc;
		}
		
		.main{
			flex: 1;
			overflow: hidden;
		}	
		.list{
			padding: 0 30rpx 30rpx;
			.list-item{
				display: flex;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-top: 30rpx;
				.list-item-left{
					width: 230rpx;
					height: 230rpx;
					margin-right: 30rpx;
					image{
						width: 230rpx;
						height: 230rpx;
						border: 1px solid #ccc;
						border-radius: 10rpx;
					}
				}
				.list-title{
					overflow: hidden; //超出的文本隐藏
					display: -webkit-box;
					-webkit-line-clamp: 2; // 超出多少行
					-webkit-box-orient: vertical;
				}
				.list-item-right{
					flex: 1;
					.list-content{
						display: flex;
						background: #f1f1f1;
						margin-top: 20rpx;
						padding: 14rpx;
						font-size: 20rpx;
						border-radius: 10rpx;
						.list-content-item{
							flex: 1;
							text-align: center;
							>view{
								color: red;
								margin-top: 10rpx;
							}
						}
					}
				}
				
				.list-btn{
					background-color: #0f82f8;
					color: #fff;
					width: 160rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 100rpx;
					margin-top: 10rpx;
					float: right;
				}
			}
		}
		
		
	}
</style>